<!--  -->
<template>
	<view>
		<view class="page">
			<view v-if="showText" class="textarea" @click="setShow()">
				<text>{{placeholder}}</text>
			</view>
			<textarea :adjust-position="false" ref="textarea" v-else class="textarea" :focus="textareaFocus" v-model="content"></textarea>
		</view>
		<view class="fixed-bottom">
			<view class="opts">
				<view class="opts_item" @click="copy()">
					<image class="opts_item_icon" src="@/static/copy.png"></image>
					<view class="opts_item_name">复制</view>
				</view>
				<view class="opts_item" @click=";content='',showText=true">
					<image class="opts_item_icon" src="@/static/del.png"></image>
					<view class="opts_item_name">删除</view>
				</view>
			</view>
			<view class="btn" @click="_submit">发布</view>
		</view>
	</view>
</template>

<script>
	import {
		newsCarsBatchExample,
		newsCarsReleaseSaveAll
	} from '@/api/source.js'
	import throttle from "@/utils/throttle.js";
	export default {
		data() {
			return {
				textareaFocus:false,
				showText:true,
				form:{
					users_id:'',
					data:[],
				},
				content: "",
				placeholder:"请输入",
			};
		},
		onLoad() {
			this._newsCarsBatchExample();
			
			// #ifdef MP-WEIXIN
			wx.enableAlertBeforeUnload({
					message: '现在退出填写的内容将被清空\r\n确认退出?',
					success:()=>{}
			})
			// #endif
		},
		onUnload() {
			
			// #ifdef MP-WEIXIN
			wx.disableAlertBeforeUnload({})
			// #endif
		},
		methods: {
			setShow(){
				this.showText=false;
				this.textareaFocus=true;
			},
			_newsCarsBatchExample(){
				newsCarsBatchExample().then((res)=>{
					this.placeholder=res.data.batch_example;
				})
			},
			_submit() {
				let that = this;
				let param = this.form;
				throttle(()=> {
					param.users_id=uni.getStorageSync('login').id || ''
					if(this.content==''){
						this.showToast('请选择对应车型')
						return;
					}
					param.data=this.content.split("\n");
					// console.log(JSON.stringify(param));
					newsCarsReleaseSaveAll(param).then((res)=>{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask:true
						});
						
						if(res.code===0){
							// #ifdef MP-WEIXIN
							wx.disableAlertBeforeUnload({})
							// #endif
							setTimeout(()=>{
								uni.navigateBack();
							},1500)
						}
						
					})
				}, 1000)
			},
			copy(){
				uni.setClipboardData({
					data: this.placeholder,
					success: function () {
						uni.showToast({
							icon:'none',
							title:'已复制到剪贴板'
						})
					}
				});
			},
			jumpUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 28rpx 28rpx 162rpx;
		box-sizing: border-box;
	}

	.textarea {
		width: 100%;
		height: calc(100vh - 230rpx);
		background: #E6E6E6;
		border-radius: 16rpx;
		padding: 18rpx 20rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.fixed-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 41rpx 28rpx;
		width: 100%;
		z-index: 98;
		background: #FFFFFF;
		box-shadow: 0rpx -6rpx 4rpx 0rpx rgba(204, 204, 204, 0.2);
		display: flex;
		align-items: center;
		justify-content: space-between;

		.opts {
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: calc(100% - 530rpx);

			.opts_item {
				font-size: 24rpx;
				color: #333333;

				&_icon {
					width: 42rpx;
					height: 42rpx;
					margin-bottom: 14rpx;
				}
			}
		}

		.btn {
			width: 530rpx;
			height: 80rpx;
			background: #0E59EA;
			border-radius: 40rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			box-sizing: border-box;
		}
	}
</style>